<template>
  <div
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <!--搜索栏-->
    <common-list-search-bar
      ref="commonListSearchBar"
      :field-arr="searchSittingArray"
      :search-list="searchList">
      <template slot="actButton">
        <my-button type="primary" :click="function (){createProduct({})}" text="新增"
                   access-action="Product/manage"></my-button>
      </template>
    </common-list-search-bar>
    <common-list-table
      ref="myCommonListTable"
      :sitting="listTableSitting"
      :search-list="searchList">
      <template slot="actSlot" slot-scope="scope">
        <my-button type="success" :click="function (){shopStockList(scope)}" text="库存" access-action="Product/getStockList"></my-button>
        <my-button type="success" :click="function (){shopStockLogList(scope)}" text="库存明细" access-action="Product/getStockLogList"></my-button>
        <my-button type="success" :click="function (){logList(scope)}" text="上下架日志" access-action="Product/getLogList"></my-button>
        <my-button style="margin-top: 2px;" type="warning" :click="function (){submitApply(scope)}"
                   :text="scope.rowInfo.status.id===0?'申请上架':'申请下架'"
                   :disabled="scope.rowInfo.checkStatus.id===1"
                   access-action="Product/manage"></my-button>
        <el-button style="margin-top: 2px;" type="info" v-if="scope.rowInfo.checkStatus && scope.rowInfo.checkStatus.id===3"
                   @click="showRefuseInfo(scope.rowInfo.checkStatusInfo)">拒绝原因
        </el-button>
        <my-button style="margin-top: 2px;" type="success" :click="function (){createProduct(scope)}" text="编辑"
                   access-action="Product/manage"></my-button>
        <my-button style="margin-top: 2px;" type="danger" :click="function (){del(scope);}" text="删除" :disabled="scope.rowInfo.status.id===1"
                   access-action="Product/manage"></my-button>
      </template>
    </common-list-table>

    <create-product-dialog ref="createProductDialog" :success-function="searchList"/>
    <shop-stock-list-dialog ref="shopStockListDialog" :success-function="searchList"/>
    <shop-stock-log-list-dialog ref="shopStockLogListDialog"/>
    <product-log-list-dialog ref="productLogListDialog"/>
  </div>
</template>

<script>


import CreateProductDialog from '../Dialog/CreateProductDialog'
import ShopStockListDialog from '../Dialog/ShopStockListDialog'
import ShopStockLogListDialog from '../Dialog/ShopStockLogListDialog'
import ProductLogListDialog from '../Dialog/ProductLogListDialog'
import MyButton from '../Common/MyButton'

var fieldArr = DemoData.Product.field
// console.log('fieldArr',fieldArr)
export default {
  name: 'ProductPage',
  components: {
    MyButton,
    ProductLogListDialog,
    ShopStockLogListDialog, ShopStockListDialog, CreateProductDialog,
  },
  mounted () {
    // 模拟数据
    // this.$refs.myCommonListTable.setListData(DemoData.Product.list)
    this.searchList()
  },
  data: function () {
    return {
      loading: false,
      // 搜索栏配置项
      searchSittingArray: Object.assign([], fieldArr),
      listTableSitting: {
        modelName: '商品管理',
        fieldArr: fieldArr,
        tableHeight: this.getTableHeight(),
        page: 1,
        pageSize: 20,
        actColumnWidth: 350,
        defaultSort: {
          // prop:'username',
          // order:'descending',
        }
      }
    }
  },
  methods: {
    // 提交审核
    submitApply: function (info) {
      let $this = this
      this.$confirm('您确认要进行该操作吗, 是否继续?', '系统提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        $this.loading = true
        $this.MyRequest($this.ApiDoNameShop + 'Product/submitApply', {id: info.rowInfo.id}, function () {
          $this.loading = false
          $this.$message({
            type: 'success',
            message: '操作成功'
          })
          $this.searchList()
          $this.$forceUpdate()
        }, function (res) {
          $this.$message.error(res.message)
          $this.loading = false
        })
      })
    },
    // 显示拒绝信息
    showRefuseInfo: function (info) {
      this.$alert('拒绝原因:' + info)
    },
    getTableHeight: function () {
      var height = this.getWinSize().height - 225
      return height > 500 ? height : 500
    },
    // 初始化查询
    searchList: function () {
      // 表格列表,查询参数
      var listTableForm = this.$refs.myCommonListTable.formData

      // 搜索栏,查询参数
      var searchBarForm = this.$refs.commonListSearchBar.getFormData()

      var form = Object.assign({}, listTableForm, searchBarForm)
      // 如果有默认排序 && 默认排序数据未设置,就进行查询请求(默认排序设置会触发查询)
      if (this.listTableSitting.defaultSort && this.listTableSitting.defaultSort.prop && this.$refs.myCommonListTable.formData.sortOrder === '') {
        return ''
      }
      let $this = this
      $this.loading = true
      $this.MyRequest($this.ApiDoNameShop + 'Product/getList', form, function (data) {
        $this.$refs.myCommonListTable.setListData(data)
        $this.loading = false
        $this.$forceUpdate()
      })
    },
    // 删除单条数据
    del: function (info) {
      let $this = this
      this.$confirm('您确认要进行该操作吗, 是否继续?', '系统提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        $this.loading = true
        $this.MyRequest($this.ApiDoNameShop + 'Product/delete', {id: info.rowInfo.id}, function () {
          $this.loading = false
          $this.$message({
            type: 'success',
            message: '删除成功'
          })
          $this.searchList()
          $this.$forceUpdate()
        }, function (res) {
          $this.$message.error(res.message)
          $this.loading = false
        })
      })
    },
    // 创建商品-弹窗
    createProduct: function (infoParams) {
      var info = {}
      if (infoParams && infoParams.rowInfo) {
        info = infoParams.rowInfo
      }
      this.$refs.createProductDialog.open(info)
    },
    // 商品日志-弹窗
    logList: function (infoParams) {
      if (infoParams && infoParams.rowInfo) {
        this.$refs.productLogListDialog.open(infoParams.rowInfo)
      }
    },
    // 库存列表-弹窗
    shopStockList: function (infoParams) {
      if (infoParams && infoParams.rowInfo) {
        this.$refs.shopStockListDialog.open(infoParams.rowInfo)
      }
    },
    // 库存日志列表-弹窗
    shopStockLogList: function (infoParams) {
      if (infoParams && infoParams.rowInfo) {
        this.$refs.shopStockLogListDialog.open('ShopProduct', infoParams.rowInfo)
      }
    }
  }
}
</script>

<style scoped>

</style>
